<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <span>span1</span>
    <span class="span2">span2</span>
    <span>span3</span>
  </div>

  <button class="add">添加节点</button>
  <button class="del">删除节点</button>
  <script>
    const add = document.querySelector('.add')
    const del = document.querySelector('.del')
    const span2 = document.querySelector('.span2')
    // console.log(span2)
    // 1. 查找父节点
    const parentNode = span2.parentNode
    // console.log(parentNode)
    // 2. 查找子节点(标签节点)
    // console.log(parentNode.children)
    // 3. 获取兄弟节点
    // console.log(span2.previousElementSibling)
    // console.log(span2.nextElementSibling)

    // 4. 添加节点
    add.addEventListener('click', function () {
      // 4.1 创建节点
      const img = document.createElement('img')
      img.src = './imgs/g1.png'
      img.width = 200
      // 4.2 添加节点
      // parentNode.append(img)
      parentNode.prepend(img)
    })

    // 5. 删除节点
    del.addEventListener('click', function () {
      // 5.1 获取节点
      const img = document.querySelector('img')
      console.log(img)
      // 5.2 删除节点
      img.remove()
    })
  </script>
</body>

</html>